<template>
	<div class="pie_chart" :id="id">饼形图</div>
</template>

<script>
  import * as echarts from "@/assets/js/echarts.min.js";

	export default {
		name: "Home",
		components: {},
		props: {
			id: {
				type: String,
				default: "pieChart"
			},
			title: {
				type: String,
				default: "XXX饼状图"
			},
			list: {
				type: Array,
				required: true
			},
			type: {
				type: String,
				default: "参数"
			},
		},
		data() {
			return {
        option: {
          title: {
            text:"",
            left: "center",
          },
          tooltip: {
            trigger: "item",
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: "vertical",
            left: "left",
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: [],
              roseType: 'radius',
            }
          ]
        },
      }
    },
		created() {},
		mounted() {
			let that=this;
			setTimeout(function(){
				that.init_chart();
			},200)
		},
		methods: {
			init_chart() {
				// 外部参数
				var title = this.title;
				var type = this.type;

				// 标题
				if (title) {
					this.option.title.text = title;
				}

				// 分类名
				if (type) {
					this.option.series[0].name = type;
				}

				// 参数
        console.log(this.list)
				this.option.series[0].data = this.list;

				let myChart = echarts.init(document.getElementById(this.id));
				myChart.setOption(this.option);
			},
		},
		watch: {
			list() {
				this.init_chart();
			},
		},
	};
</script>
